<template>
	<view class="address-container">
		<view class="address-list" v-if="addressList.length > 0">
			<view class="address-item" v-for="(item, index) in addressList" :key="item.id">
				<view class="address-content" @click="selectAddress(item)">
					<view class="address-header">
						<text class="name">{{ item.name }}</text>
						<text class="phone">{{ item.phone }}</text>
						<view class="default-tag" v-if="item.isDefault">默认</view>
					</view>
					<view class="address-detail">
						{{ item.province }} {{ item.city }} {{ item.district }} {{ item.detail }}
					</view>
				</view>
				<view class="address-actions">
					<view class="action-item" @click="setDefaultAddress(item)">
						<text class="radio" :class="{ active: item.isDefault }">○</text>
						<text class="action-text">设为默认</text>
					</view>
					<view class="action-item" @click="editAddress(item)">
						<text class="action-text">编辑</text>
					</view>
					<view class="action-item" @click="deleteAddress(item)">
						<text class="action-text delete">删除</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty-container" v-else>
			<image src="/static/empty-address.png" class="empty-image"></image>
			<text class="empty-text">暂无收货地址</text>
			<text class="empty-tip">添加收货地址，方便购买商品</text>
		</view>
		
		<view class="bottom-actions">
			<button class="add-address-btn" @click="addAddress">+ 新增收货地址</button>
		</view>
	</view>
</template>

<script>
import { addressApi } from '@/api/index.js'

export default {
	data() {
		return {
			addressList: [],
			isSelectMode: false, // 是否是选择地址模式
			from: '' // 来源页面
		}
	},
	
	onLoad(options) {
		// 判断是否是选择地址模式
		if (options.from) {
			this.isSelectMode = true
			this.from = options.from
		}
	},
	onShow() {
		this.loadAddressList()
	},
	methods: {
		// 加载地址列表
		async loadAddressList() {
			// 检查登录状态，未登录则不加载收藏数据
			try {
				const res = await addressApi.getAddressList()
				this.addressList = res.data || []
			} catch (error) {
				console.error('获取地址列表失败:', error)
				uni.showToast({
					title: '获取地址列表失败',
					icon: 'none'
				})
			}
		},
		
		// 选择地址
		selectAddress(address) {
			if (!this.isSelectMode) return
			
			// 通过全局事件通知选择的地址
			uni.$emit('selectAddress', address)
			uni.navigateBack()
		},
		
		// 添加地址
		addAddress() {
			uni.navigateTo({
				url: '/pages/address/edit'
			})
		},
		
		// 编辑地址
		editAddress(address) {
			uni.navigateTo({
				url: `/pages/address/edit?id=${address.id}`
			})
		},
		
		// 设置默认地址
		async setDefaultAddress(address) {
			if (address.isDefault) return
			
			try {
				await addressApi.setDefaultAddress(address.id)
				uni.showToast({
					title: '设置成功',
					icon: 'success'
				})
				this.loadAddressList()
			} catch (error) {
				console.error('设置默认地址失败:', error)
				uni.showToast({
					title: '设置失败',
					icon: 'none'
				})
			}
		},
		
		// 删除地址
		deleteAddress(address) {
			uni.showModal({
				title: '提示',
				content: '确定要删除该地址吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							await addressApi.deleteAddress(address.id)
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							this.loadAddressList()
						} catch (error) {
							console.error('删除地址失败:', error)
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							})
						}
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.address-container {
	padding-bottom: 120rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.address-list {
	padding: 20rpx;
}

.address-item {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.address-content {
	margin-bottom: 20rpx;
}

.address-header {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.name {
	font-size: 32rpx;
	font-weight: bold;
	margin-right: 20rpx;
}

.phone {
	font-size: 28rpx;
	color: #666;
	margin-right: 20rpx;
}

.default-tag {
	background-color: #d81e06;
	color: #fff;
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.address-detail {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
}

.address-actions {
	display: flex;
	justify-content: flex-end;
	border-top: 1rpx solid #f0f0f0;
	padding-top: 20rpx;
}

.action-item {
	display: flex;
	align-items: center;
	margin-left: 40rpx;
}

.radio {
	font-size: 36rpx;
	color: #999;
	margin-right: 10rpx;
}

.radio.active {
	color: #d81e06;
}

.action-text {
	font-size: 28rpx;
	color: #666;
}

.action-text.delete {
	color: #d81e06;
}

.empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	margin-bottom: 15rpx;
}

.empty-tip {
	font-size: 26rpx;
	color: #ccc;
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.add-address-btn {
	background-color: #d81e06;
	color: #fff;
	border-radius: 10rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
}
</style>